<template>
    <el-upload
      class="file-upload"
      action=""
      :before-upload="beforeUpload"
      :on-change="handleChange"
      :show-file-list="false"
      drag
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或点击上传</div>
      <div class="el-upload__tip" slot="tip">{{ uploadedFileName || label }}</div>
    </el-upload>
  </template>
  
  <script>
  import { ElUpload } from 'element-ui';
  
  export default {
    components: {
      ElUpload,
    },
    props: {
      label: { type: String, required: true },
    },
    data() {
      return {
        file: null,
        uploadedFileName: '',
      };
    },
    methods: {
      beforeUpload(file) {
        this.file = file;
        this.uploadedFileName = file.name;
        // 可以在此处添加异步上传逻辑，返回false阻止默认上传行为
        return false;
      },
      handleChange() {
        this.$emit('file-changed', this.file);
      },
    },
  };
  </script>
  
  <style scoped>
  .file-upload {
    width: 100%;
    height: auto;
  }
  </style>